<template>
  <div class="tags-view-container">
    <a-tabs type="editable-card" hide-add :activeKey="activeTabKey" @change="onTabChange" @edit="confirmReomve">
      <template #leftExtra>
        <span v-if="configType == 'online'" :class="['home-icon', {'active': activeTabKey === '/makeManage/makeList'}]" @click="onTabChange('/makeManage/makeList')">
          <home-outlined />
        </span>
        <span v-else :class="['home-icon', {'active': activeTabKey === '/hangManage/prodTimeInfo'}]" @click="onTabChange('/hangManage/prodTimeInfo')">
          <home-outlined />
        </span>
      </template>
      <a-tab-pane v-for="x in tabs" :key="x.path" :tab="$t(`menu.${x.permission}`)" :name="x.path" :closable="true"></a-tab-pane>
      <template #rightExtra>
        <a-dropdown trigger="click">
          <span class="ant-dropdown-link" @click.prevent>
            <DownOutlined />
          </span>
          <template #overlay>
            <a-menu @click="onClose" class="tags-menu-container">
              <a-menu-item v-for="x in ops" :key="x.value">
                <close-circle-outlined />
                {{ x.label }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-tabs>

  </div>
</template>

<script>
import { store } from '@/store'
import { mapState } from 'vuex'
import { cloneDeep, findIndex } from 'lodash'
import { HomeOutlined, DownOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
export default {
  name: 'tagView',
  components: {
    HomeOutlined,
    DownOutlined,
    CloseCircleOutlined
  },
  data () {
    return {
      ops: [
        { label: this.$t('layout.closeCurrentTip'), value: 1 },
        { label: this.$t('layout.closeOtherTip'), value: 2 },
        { label: this.$t('layout.closeAllTip'), value: 3 }
      ],
      configType: process.env.VUE_APP_CONFIG,
      confirmTabList: ['/makeManage/routeChart/edit', '/makeManage/routeChart/add']
    }
  },
  computed: {
    ...mapState({
      activeSideMenu: state => state.setting.activeSideMenu,
      tabs: state => state.setting.tabs
    }),
    activeTabKey () {
      return this.activeSideMenu.length && this.activeSideMenu[0]
    }
  },
  methods: {
    onClose (e) {
      const value = e.key;
      let index = null;
      let changeTabs = []
      const tabsList = cloneDeep(this.tabs)
      switch (value) {
        case 2:
          //其他
          changeTabs = tabsList.filter((i) => this.activeTabKey === (i.path));
          store.commit('updateState', { tabs: changeTabs })
          break;
        case 3:
          //全部
          changeTabs = [];
          store.commit('updateState', { tabs: changeTabs })
          this.onTabChange(this.configType == 'online' ? '/makeManage/makeList' : '/hangManage/prodTimeInfo')
          break;
        case 1:
          //当前
          index = findIndex(tabsList, (i) => i.path === this.activeTabKey);
          tabsList.splice(index, 1);
          changeTabs = tabsList
          store.commit('updateState', { tabs: changeTabs })
          this.onTabChange(tabsList.length ? tabsList[tabsList.length - 1].path : (this.configType == 'online' ? '/makeManage/makeList' : '/hangManage/prodTimeInfo'))
          break;
        default:
          break;
      }
    },
    onTabChange (tabs) {
      let queryInfo = this.tabs.filter(i => i.path == tabs).length ? this.tabs.filter(i => i.path == tabs)[0].query : null
      this.$router.push({ path: tabs, query: queryInfo })
    },
    confirmReomve (targetKey) {
      if (this.confirmTabList.includes(targetKey)) {
        Modal.confirm({
          title: '提示',
          content: '离开后数据不保存',
          onOk: () => {
            this.onTabRemove(targetKey)
          },
          onCancel () { },
        })
      } else {
        this.onTabRemove(targetKey)
      }
    },
    onTabRemove (targetKey) {
      const tabsList = this.tabs
      console.log('targetKey, ', targetKey)
      if (tabsList.length) {
        if (targetKey === this.activeTabKey) {
          const newTabsList = tabsList.filter((tab) => tab.path !== targetKey)
          if (newTabsList.length) {
            store.commit('updateState', { tabs: newTabsList })
            this.onTabChange(newTabsList[newTabsList.length - 1]['path'])
          } else {
            store.commit('updateState', { tabs: [] })
            this.onTabChange(this.configType == 'online' ? '/makeManage/makeList' : '/hangManage/prodTimeInfo')
          }
        }
        if (targetKey !== this.activeTabKey) {
          const newTabsList = tabsList.filter((tab) => tab.path !== targetKey)
          store.commit('updateState', { tabs: newTabsList })
        }
      }
    }
  }
}
</script>